<template>
	<view>
		<h3>{{chapterName}}</h3>
		<p v-for="(value,index) in chapterContentList">
			{{value}}
		</p>
		<button @tap="up" v-if="chapterId>1">上一章</button>
		<button @tap="down">下一章</button>
	</view>
</template>  

<script>
	import http from '/pages/utils/request.js'
	export default {
		data() {
			return {
				id:'',
				chapterId:1,
				chapterName:"hhh",
				chapterContentList:[],
				bookChapterDTO:{
					
					bookId:0,
					chapterNo:0,
				}
			}
		},
		onLoad(option) {
			this.id=option.bookid;
			this.bookChapterDTO.chapterNo=this.chapterId;
			this.bookChapterDTO.bookId=+this.id;
			http.post("/book/bookchapter",this.bookChapterDTO,{headers:{"Content-Type":"application/json"}}).then(res => {
				this.chapterContentList=res.data.chapterContent
				this.chapterName=res.data.chapterName
				console.log(res.data);
			})
		},
		methods: {
			up(){
				this.chapterId=this.chapterId-1
				this.bookChapterDTO.chapterNo=this.chapterId;
				this.bookChapterDTO.bookId=+this.id;
				http.post("/book/bookchapter",this.bookChapterDTO,{headers:{"Content-Type":"application/json"}}).then(res => {
					this.chapterContentList=res.data.chapterContent
					this.chapterName=res.data.chapterName
					uni.pageScrollTo({
					      scrollTop: 0, // 滚动到顶部
					      duration: 100 // 滚动动画的时长（单位：毫秒）
					    });
					console.log(res.data);
				})
			},
			down(){
				this.chapterId=this.chapterId+1
				this.bookChapterDTO.chapterNo=this.chapterId;
				this.bookChapterDTO.bookId=+this.id;
				http.post("/book/bookchapter",this.bookChapterDTO,{headers:{"Content-Type":"application/json"}}).then(res => {
					this.chapterContentList=res.data.chapterContent
					this.chapterName=res.data.chapterName
					uni.pageScrollTo({
					      scrollTop: 0, // 滚动到顶部
					      duration: 100 // 滚动动画的时长（单位：毫秒）
					    });
					console.log(res.data);
				})
			}
		}
	}
</script>

<style>
	body{
		background-color: rgb(231,224,198);
	}
	h3{
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}
	p{
		text-indent: 2rem;
		margin-top: 20rpx;
	}
</style>
